// The prefix to use on all css classes from ant.
@prefix: tj;

@fes-icon-cls: fes-design-icon;

// An override for the html selector for theme prefixes
@html-selector: html;

// -------- font -----------
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
  "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
  sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@code-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
  monospace;
@font-variant-base: tabular-nums;
@font-feature-settings-base: "tnum";
@line-height-base: 22px;

// font-size
@font-size-caption: calc(var(--tj-font-size-base) - 2px);
@font-size-body: var(--tj-font-size-base);
@font-size-head: calc(var(--tj-font-size-base) + 2px);
@font-size-title: calc(var(--tj-font-size-base) + 6px);
@font-size-large-title: calc(var(--tj-font-size-base) + 10px);

// font-weight
@font-weight-regular: 400;
@font-weight-medium: 500;
@font-weight-semibold: 600;

// -------- vertical paddings -----------
@padding-lg: var(--tj-padding-large); // containers
@padding-md: var(--tj-padding-middle); // small containers and buttons
@padding-sm: var(--tj-padding-small); // Form controls and items
@padding-xs: var(--tj-padding-xsmall); // small items

// -------- shadow -----------
@shadow-up: 0 -2px var(--tj-shadow-radius) var(--tj-shadow-color);
@shadow-down: 0 2px var(--tj-shadow-radius) var(--tj-shadow-color);
@shadow-left: -2px 0 var(--tj-shadow-radius) var(--tj-shadow-color);
@shadow-right: 2px 0 var(--tj-shadow-radius) var(--tj-shadow-color);
@shadow-sm-up: 0 -2px var(--tj-shadow-radius-sm) var(--tj-shadow-color-sm);
@shadow-sm-down: 0 2px var(--tj-shadow-radius-sm) var(--tj-shadow-color-sm);
@shadow-sm-left: -2px 0 var(--tj-shadow-radius-sm) var(--tj-shadow-color-sm);
@shadow-sm-right: 2px 0 var(--tj-shadow-radius-sm) var(--tj-shadow-color-sm);

// z-index list, order by `z-index`
@zindex-badge: 1;
@zindex-table-fixed: 1;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-tooltip: 1060;
@zindex-image: 1080;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
@animation-duration-slow: 0.3s;
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s;

// form

@data-input-height-base: 32px;

// 公共前缀

// 颜色色板

@warning-color-1: var(--tj-warning-color-1);
@warning-color-2: var(--tj-warning-color-2);
@warning-color-3: var(--tj-warning-color-3);
@warning-color-4: var(--tj-warning-color-4);
@warning-color-5: var(--tj-warning-color-5);
@warning-color-6: var(--tj-warning-color-6);
@warning-color-7: var(--tj-warning-color-7);
@warning-color-8: var(--tj-warning-color-8);
@warning-color-9: var(--tj-warning-color-9);
@warning-color-10: var(--tj-warning-color-10);

@error-color-1: var(--tj-error-color-1);
@error-color-2: var(--tj-error-color-2);
@error-color-3: var(--tj-error-color-3);
@error-color-4: var(--tj-error-color-4);
@error-color-5: var(--tj-error-color-5);
@error-color-6: var(--tj-error-color-6);
@error-color-7: var(--tj-error-color-7);
@error-color-8: var(--tj-error-color-8);
@error-color-9: var(--tj-error-color-9);
@error-color-10: var(--tj-error-color-10);

@success-color-1: var(--tj-success-color-1);
@success-color-2: var(--tj-success-color-2);
@success-color-3: var(--tj-success-color-3);
@success-color-4: var(--tj-success-color-4);
@success-color-5: var(--tj-success-color-5);
@success-color-6: var(--tj-success-color-6);
@success-color-7: var(--tj-success-color-7);
@success-color-8: var(--tj-success-color-8);
@success-color-9: var(--tj-success-color-9);
@success-color-10: var(--tj-success-color-10);

@gray-color-1: var(--tj-gray-color-1);
@gray-color-2: var(--tj-gray-color-2);
@gray-color-3: var(--tj-gray-color-3);
@gray-color-4: var(--tj-gray-color-4);
@gray-color-5: var(--tj-gray-color-5);
@gray-color-6: var(--tj-gray-color-6);
@gray-color-7: var(--tj-gray-color-7);
@gray-color-8: var(--tj-gray-color-8);
@gray-color-9: var(--tj-gray-color-9);
@gray-color-10: var(--tj-gray-color-10);
@gray-color-11: var(--tj-gray-color-7);
@gray-color-12: var(--tj-gray-color-8);
@gray-color-13: var(--tj-gray-color-10);
@gray-color-14: var(--tj-gray-color-10);

// 文字 & 图标 颜色
@font-white-1: var(--tj-font-white-1);
@font-white-2: var(--tj-font-white-2);
@font-white-3: var(--tj-font-white-3);
@font-white-4: var(--tj-font-white-4);

@font-gray-1: var(--tj-font-gray-4);
@font-gray-2: var(--tj-font-gray-3);
@font-gray-3: var(--tj-font-gray-2);
@font-gray-4: var(--tj-font-gray-1);

// 基础颜色
@brand-color: var(--tj-primary-color); // 色彩-品牌-可操作
@warning-color: var(--tj-warning-color); // 色彩-功能-警告
@error-color: var(--tj-error-color); // 色彩-功能-失败
@success-color: var(--tj-success-color); // 色彩-功能-成功

// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
@brand-color-hover: var(--tj-primary-color-4); // hover态
@brand-color-focus: var(--tj-primary-color-7); // focus态，包括鼠标和键盘
@brand-color-active: var(--tj-primary-color-5); // 点击态
@brand-color-disabled: var(--tj-primary-color-3); // 禁用态
@brand-color-light: var(--tj-primary-color-1); // 浅色的选中态

// 警告色扩展
@warning-color-hover: var(--tj-warning-color-hover);
@warning-color-focus: var(--tj-warning-color-focus);
@warning-color-active: var(--tj-warning-color-active);
@warning-color-disabled: var(--tj-warning-color-3);
@warning-color-light: var(--tj-warning-color-light);

// 失败/错误色扩展
@error-color-hover: var(--tj-error-color-hover);
@error-color-focus: var(--tj-error-color-focus);
@error-color-active: var(--tj-error-color-active);
@error-color-disabled: var(--tj-border-level-2-color);
@error-color-light: var(--tj-error-color-light);

// 成功色扩展
@success-color-hover: var(--tj-success-color-hover);
@success-color-focus: var(--tj-success-color-focus);
@success-color-active: var(--tj-success-color-active);
@success-color-disabled: var(--tj-success-color-3);
@success-color-light: var(--tj-success-color-light);

// 遮罩
@mask-active: var(--tj-mask-active); // 遮罩-弹出
@mask-disabled: var(--tj-mask-disabled); // 遮罩-禁用

// 背景色
@bg-color-page: var(--tj-bg-color-page); // 色彩 - page
@bg-color-container: var(--tj-bg-color-container); // 色彩 - 容器
@bg-color-container-hover: var(
  --tj-bg-color-container-hover
); // 色彩 - 容器 - hover
@bg-color-container-active: var(
  --tj-bg-color-container-active
); // 色彩 - 容器 - active
@bg-color-container-select: var(
  --tj-bg-color-container-select
); // 色彩 - 容器 - select

@bg-color-secondarycontainer: var(
  --tj-bg-color-secondarycontainer
); // 色彩 - 次级容器
@bg-color-secondarycontainer-hover: var(
  --tj-bg-color-secondarycontainer-hover
); // 色彩 - 次级容器 - hover
@bg-color-secondarycontainer-active: var(
  --tj-bg-color-secondarycontainer-active
); // 色彩 - 次级容器 - active

@bg-color-component: var(--tj-bg-color-component); // 色彩  - 组件
@bg-color-component-hover: var(
        --tj-bg-color-component-hover
); // 色彩 - 组件 - hover
@bg-color-component-active: var(
        --tj-bg-color-component-active
); // 色彩 - 组件 - active


@bg-color-secondarycomponent: var(
  --tj-bg-color-secondarycomponent
); // 色彩 - 次级组件
@bg-color-secondarycomponent-hover: var(
  --tj-bg-color-secondarycomponent-hover
); // 色彩 - 次级组件 - hover
@bg-color-secondarycomponent-active: var(
  --tj-bg-color-secondarycomponent-active
); // 色彩 - 次级组件 - active

@bg-color-component-disabled: var(
  --tj-bg-color-component-disabled
); // 色彩 - 组件 - disabled

// TODO: 考虑是否在组件内部做判断，不增加额外变量
// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
@bg-color-specialcomponent: var(--tj-bg-color-specialcomponent);

// 文本颜色
@text-color-primary: var(--tj-text-color-primary); // 色彩-文字-主要
@text-color-secondary: var(--tj-text-color-secondary); // 色彩-文字-次要
@text-color-placeholder: var(
  --tj-text-color-placeholder
); // 色彩-文字-占位符/说明
@text-color-disabled: var(--tj-text-color-disabled); // 色彩-文字-禁用
@text-color-anti: var(--tj-text-color-anti); // 色彩-文字-反色
@text-color-brand: var(--tj-primary-color); // 色彩-文字-品牌
@text-color-link: var(--tj-text-color-link); // 色彩-文字-链接

// 分割线
@border-level-1-color: var(--tj-border-level-1-color);
@component-stroke: var(--tj-component-stroke);
// 边框
@border-level-2-color: var(--tj-border-level-2-color);
@component-border: var(--tj-component-border);

// shadow

// 基础/下层 投影 hover 使用的组件包括：表格 /
@shadow-1: var(--tj-shadow-1);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
@shadow-2: var(--tj-shadow-2);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
@shadow-3: var(--tj-shadow-3);

// 内投影 用于弹窗类组件（气泡确认框 / 全局提示 / 消息通知）的内描边
@shadow-inset-top: var(--tj-shadow-inset-top);
@shadow-inset-right: var(--tj-shadow-inset-right);
@shadow-inset-bottom: var(--tj-shadow-inset-bottom);
@shadow-inset-left: var(--tj-shadow-inset-left);
@shadow-inset: @shadow-inset-top, @shadow-inset-right, @shadow-inset-bottom,
  @shadow-inset-left;

// 融合阴影
@shadow-2-inset: @shadow-2, @shadow-inset;
@shadow-3-inset: @shadow-3, @shadow-inset;

@size-1: var(--tj-size-1);
@size-2: var(--tj-size-2);
@size-3: var(--tj-size-3);
@size-4: var(--tj-size-4);
@size-5: var(--tj-size-5);
@size-6: var(--tj-size-6);
@size-7: var(--tj-size-7);
@size-8: var(--tj-size-8);
@size-9: var(--tj-size-9);
@size-10: var(--tj-size-10);
@size-11: var(--tj-size-11);
@size-12: var(--tj-size-12);
@size-13: var(--tj-size-13);
@size-14: var(--tj-size-14);
@size-15: var(--tj-size-15);
@size-16: var(--tj-size-16);

// component 组件尺寸高度相关 token
@comp-size-xxxs: var(--tj-comp-size-xxxs);
@comp-size-xxs: var(--tj-comp-size-xxs);
@comp-size-xs: var(--tj-comp-size-xs);
@comp-size-s: var(--tj-comp-size-s);
@comp-size-m: var(--tj-comp-size-m);
@comp-size-l: var(--tj-comp-size-l);
@comp-size-xl: var(--tj-comp-size-xl);
@comp-size-xxl: var(--tj-comp-size-xxl);
@comp-size-xxxl: var(--tj-comp-size-xxxl);
@comp-size-xxxxl: var(--tj-comp-size-xxxxl);
@comp-size-xxxxxl: var(--tj-comp-size-xxxxxl);

// popup 弹出层整体边距 token
@pop-padding-s: var(--tj-pop-padding-s);
@pop-padding-m: var(--tj-pop-padding-m);
@pop-padding-l: var(--tj-pop-padding-l);
@pop-padding-xl: var(--tj-pop-padding-xl);
@pop-padding-xxl: var(--tj-pop-padding-xxl);

// component 组件左右边距 token
@comp-paddingLR-xxs: var(--tj-comp-paddingLR-xxs);
@comp-paddingLR-xs: var(--tj-comp-paddingLR-xs);
@comp-paddingLR-s: var(--tj-comp-paddingLR-s);
@comp-paddingLR-m: var(--tj-comp-paddingLR-m);
@comp-paddingLR-l: var(--tj-comp-paddingLR-l);
@comp-paddingLR-xl: var(--tj-comp-paddingLR-xl);
@comp-paddingLR-xxl: var(--tj-comp-paddingLR-xxl);

// component 组件上下边距 token
@comp-paddingTB-xxs: var(--tj-comp-paddingTB-xxs);
@comp-paddingTB-xs: var(--tj-comp-paddingTB-xs);
@comp-paddingTB-s: var(--tj-comp-paddingTB-s);
@comp-paddingTB-m: var(--tj-comp-paddingTB-m);
@comp-paddingTB-l: var(--tj-comp-paddingTB-l);
@comp-paddingTB-xl: var(--tj-comp-paddingTB-xl);
@comp-paddingTB-xxl: var(--tj-comp-paddingTB-xxl);

// component 组件间距 token
@comp-margin-xxs: var(--tj-comp-margin-xxs);
@comp-margin-xs: var(--tj-comp-margin-xs);
@comp-margin-s: var(--tj-comp-margin-s);
@comp-margin-m: var(--tj-comp-margin-m);
@comp-margin-l: var(--tj-comp-margin-l);
@comp-margin-xl: var(--tj-comp-margin-xl);
@comp-margin-xxl: var(--tj-comp-margin-xxl);
@comp-margin-xxxl: var(--tj-comp-margin-xxxl);
@comp-margin-xxxxl: var(--tj-comp-margin-xxxxl);

// Spacer 【deprecated】
@spacer: 8px;
@spacer-s: @spacer * 0.5; // 间距-4
@spacer-m: @spacer * 0.75; // 间距-6
@spacer-l: @spacer * 1.5; // 间距-12
@spacer-1: @spacer; // 间距-8
@spacer-2: @spacer * 2; // 间距-16
@spacer-3: @spacer * 3; // 间距-24
@spacer-4: @spacer * 4; // 间距-32
@spacer-5: @spacer * 5; // 间距-大-40
@spacer-6: @spacer * 6; // 间距-大-48
@spacer-7: @spacer * 7; // 间距-大-48
@spacer-8: @spacer * 8; // 间距-大-48
@spacer-9: @spacer * 9; // 间距-大-48
@spacer-10: @spacer * 10; // 间距-大-80

@text-line-height-s: var(--tj-line-height-body-small);
@text-line-height-base: var(--tj-line-height-body-medium);
@text-line-height-l: var(--tj-line-height-body-large);
@text-line-height-xl: var(--tj-line-height-title-large);
@text-line-height-xxl: var(--tj-line-height-headline-large);

// Font
@font-size: 10px;
@font-size-s: var(--tj-font-size-body-small);
@font-size-base: var(--tj-font-size-body-medium);
@font-size-l: var(--tj-font-size-body-large);
@font-size-xl: var(--tj-font-size-title-large);
@font-size-xxl: var(--tj-font-size-headline-large);

@font-family: var(--tj-font-family); // 字体-磅数-常规
@font-family-medium: var(--tj-font-family-medium); // 字体-磅数-粗体

// 使用以下与Design Token对应的font token开发组件对应字体、行高
@font-link-small: var(--tj-font-link-small);
@font-link-medium: var(--tj-font-link-medium);
@font-link-large: var(--tj-font-link-large);
@font-mark-small: var(--tj-font-mark-small);
@font-mark-medium: var(--tj-font-mark-medium);
@font-body-small: var(--tj-font-body-small);
@font-body-medium: var(--tj-font-body-medium);
@font-body-large: var(--tj-font-body-large);
@font-title-small: var(--tj-font-title-small);
@font-title-medium: var(--tj-font-title-medium);
@font-title-large: var(--tj-font-title-large);
@font-headline-small: var(--tj-font-headline-small);
@font-headline-medium: var(--tj-font-headline-medium);
@font-headline-large: var(--tj-font-headline-large);
@font-display-medium: var(--tj-font-display-medium);
@font-display-large: var(--tj-font-display-large);

// Border Radius
@border-radius-small: var(--tj-radius-small); // 圆角-2
@border-radius-default: var(--tj-radius-default); // 圆角-3
@border-radius-medium: var(--tj-radius-medium); // 圆角-6
@border-radius-large: var(--tj-radius-large); // 圆角-9
@border-radius-extraLarge: var(--tj-radius-extraLarge); // 圆角-12
@border-radius-round: var(--tj-radius-round); // 圆角-999
@border-radius-circle: var(--tj-radius-circle); // 圆角-全圆角

// 表单相关
@form-height: 30px;
@form-text-color: @text-color-primary;
@form-bg-color: @bg-color-container;
@form-border-color: @border-level-2-color;

// 图标尺寸
@icon-default: 16px;
@icon-l: 24px;

// 滚动条颜色
@scrollbar-color: var(--tj-scrollbar-color);
// 滚动条悬浮点击颜色
@scrollbar-hover-color: var(--tj-scrollbar-hover-color);
@scrollbar-hover-active: var(--tj-scrollbar-hover-active);
// 滚动条轨道颜色
@scroll-track-color: var(--tj-scroll-track-color);

// 响应式断点
@screen-xs: 320px;
@screen-xs-min: @screen-xs;
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-xl: 1400px;
@screen-xl-min: @screen-xl;
@screen-xxl: 1880px;
@screen-xxl-min: @screen-xxl;

// 动画
@anim-time-fn-easing: cubic-bezier(0.38, 0, 0.24, 1);
@anim-time-fn-ease-out: cubic-bezier(0, 0, 0.15, 1);
@anim-time-fn-ease-in: cubic-bezier(0.82, 0, 1, 0.9);
@anim-duration-base: 0.2s;
@anim-duration-moderate: 0.24s;
@anim-duration-slow: 0.28s;

// 统一管理各组件层级关系
@z-index-affix: 500;
@z-index-drawer: 1500;
@z-index-dialog: 2500;
@z-index-image-viewer: 3000;
@z-index-loading: 3500;
@z-index-message: 5000;
@z-index-Popup: 5500;
@z-index-Tooltip: 5600;
@z-index-Notification: 6000;
@z-index-dragging: 6500;
@z-index-guide: 999999;
